<template>
  <n-modal
    :show="show"
    :show-mask="false"
    :mask-closable="true"
    :auto-focus="false"
    :closable="false"
    class="gift-rules-modal"
    @update:show="onUpdateShow"
  >
    <div class="rules-card">
      <div class="close-btn" @click="close"></div>
      <h2 class="title">打赏规则</h2>
      <ol class="rules-list">
        <li>您可以通过客户端等功能入口给网吧内工作人员进行打赏</li>
        <li>您通过在线支付的形式向网吧内工作人员进行打赏</li>
        <li>您可以在打赏功能界面中查看自己的打赏记录</li>
        <li>打赏后的金额不可退还，请务必在打赏前完成确认</li>
        <!-- <li>关于打赏活动的最终解释权归所有。</li> -->
      </ol>
    </div>
  </n-modal>
</template>

<script setup lang="ts">
const props = defineProps({
  show: { type: Boolean, default: false }
})
const emit = defineEmits(['update:show'])
function onUpdateShow(v: boolean) { emit('update:show', v) }
function close() { emit('update:show', false) }
</script>

<style scoped lang="scss">
.gift-rules-modal {
  display: grid;
  place-items: center;
}

.rules-card {
  position: relative;
  width: 700px;
  background: #fff;
  border-radius: 28px;
  padding: 36px 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.title {
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  margin: 8px 0 16px;
  color: #000;
}

.close-btn {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 28px;
  height: 28px;
  background: url('@/assets/gb2.png') no-repeat center / cover;
  cursor: pointer;
  transition: transform .2s ease;
}
.close-btn:hover { transform: scale(1.06) rotate(180deg); }

.rules-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rule;
  color: #333;
  font-size: 16px;
  line-height: 1.8;
}
.rules-list li {
  counter-increment: rule;
  margin: 8px 0;
}
.rules-list li::before {
  content: counter(rule) '、';
  margin-right: 6px;
}
</style>